/**
 * All rights Reserved, Designed By 信鸥科技
 * project : committee
 * Created by youquer on 17/10/25.
 * 注意：本内容仅限于信鸥科技有限公司内部传阅，禁止外泄以及用于其他的商业目的
 * Description:
 *
 */
//React
import React from 'react';
import PropTypes from 'prop-types';
//Dva
import { Link } from 'dva/router';
import { connect } from 'dva'
//antd
import { Form, Input, DatePicker, Row, Col, Tabs, Icon, Button, Card } from 'antd';
import PageHeaderLayout from '@/layouts/PageHeaderLayout';

const FormItem = Form.Item;
const TabPane = Tabs.TabPane;
//style
import styles from './UserAdd.less';
//common
import AddInput from '@/components/common/AddInput';
import { conversionTitleByValue } from '@/utils/allFunction';

const UserAdd = ({user, dispatch}) => {
  /**
   * formItemLayout: 添加页输入框样式,
   * labelCol: 左侧标题 xs:24等分, sm: 宽
   * wrapperCol: 右侧标题 xs, sm: 宽; 数值越大越宽
   * */
  const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 4 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 20 },
    },
  };

  const formItemTwoLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 8 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 16 },
    },
  };

  /**
   * patrol:model数据
   * loading: 提交按钮加载效果
   * */
  const {type, isUpdate, roleIds, roleIdsTree, appTree, realName, account, appIds, isEnable, sort,mobile} = user;
  const data = user;

  /**
   * 一排多个输入框的间距
   * */
  const gutter = {gutter: 2};

  var inputcolumns = [];
  if (isUpdate == 1){ //修改
    inputcolumns = [
      [
        {
          title: "真实姓名",
          type:"Input",
          //help: "sshelp",
          hasFeedback: true,
          placeholder: "输入最多10个字",
          validateStatus: "",
          required: true,
          formItemLayout: {...formItemTwoLayout},
          max: 10,

          key: 'realName',
        },
        {
          title: "账号",
          type:"Input",
          //help: "sshelp",
          hasFeedback: true,
          placeholder: "输入最多20个字",
          validateStatus: "",
          required: true,
          formItemLayout: {...formItemTwoLayout},
          disabled: true,

          key: 'account',
        },
      ],
      {
        title: "手机号",
        type:"Input",
        //help: "sshelp",
        hasFeedback: true,
        placeholder: "请输入手机号码",
        validateStatus: "",
        required: false,
        formItemLayout: {...formItemLayout},
        max: 11,

        key: 'mobile',
      },
      {
        title: "可用",
        type:"Switch",
        hasFeedback: true,
        placeholder: "",
        validateStatus: "",
        required: true,
        formItemLayout: {...formItemLayout},

        checkedChildren: "是",
        unCheckedChildren: "否",

        key: "isEnable",
      },
    ];
    if (appIds){
      for (var i = 0; i < appIds.length; i++){
        var item = appIds[i];
        var smart = data[item];
        var roleItem = {
          title: conversionTitleByValue(item, appTree),
          type:"SelectMoreTree",
          hasFeedback: true,
          placeholder: "请选择该应用你所拥有的角色",
          validateStatus: "",
          required: true,
          formItemLayout: {...formItemLayout},

          key: appIds[i] + "key",
          smart:  smart,
          callBack: '/roleMoreTreeCallBack'
        };
        inputcolumns.push(
          roleItem
        )
      }
    }
  } else { //添加
    inputcolumns = [
      [
        {
          title: "真实姓名",
          type:"Input",
          //help: "sshelp",
          hasFeedback: true,
          placeholder: "输入最多10个字",
          validateStatus: "",
          required: true,
          formItemLayout: {...formItemTwoLayout},
          max: 10,

          key: 'realName',
        },
        {
          title: "账号",
          type:"Input",
          //help: "sshelp",
          hasFeedback: true,
          placeholder: "输入最多20个字",
          validateStatus: "",
          required: true,
          formItemLayout: {...formItemTwoLayout},
          max: 20,

          key: 'account',
        },
      ],{
        title: "手机号",
        type:"Input",
        //help: "sshelp",
        hasFeedback: true,
        placeholder: "请输入手机号码",
        validateStatus: "",
        required: false,
        formItemLayout: {...formItemLayout},
        max: 11,

        key: 'mobile',
      },
      {
        title: "应用",
        type:"SelectMoreTree",
        //help: "sshelp",
        hasFeedback: true,
        placeholder: "",
        validateStatus: "",
        required: true,
        formItemLayout: {...formItemLayout},

        key: 'appIds',
        smart:  appTree,
        callBack: '/moreTreeCallBack'
      },
    ];

    if (appIds && appTree){
      for (var i = 0; i < appIds.length; i++){
        var item = appIds[i];
        for (var j = 0; j < appTree.length; j++){
          if (item == appTree[j].value){
            var smart = [];
            if (data[appTree[j].value]){
              smart = data[appTree[j].value]
            }
            var roleItem = {
              title: appTree[j].title,
              type:"SelectMoreTree",
              hasFeedback: true,
              placeholder: "请选择该应用你所拥有的角色",
              validateStatus: "",
              required: true,
              formItemLayout: {...formItemLayout},

              key: appIds[i] + "key",
              smart:  smart,
            };
            inputcolumns.push(
              roleItem
            )
          }
        }
      }
    }
  }



  const param = {
    inputcolumns,
    type,
    data,
    gutter,
  };

  //提交按钮
  //提交按钮
  var addInfo = {realName, account, appIds,mobile};
  const updata = {realName, account, appIds, isEnable,mobile};
  function enterLoading(){
    dispatch({
      type:type+"/submit",
      loading:true
    });
    var act = "/add"; //添加
    if (isUpdate == 1){ //修改
      act = "/update";
      dispatch({
        type:type+act,
        payload: updata
      });
    } else {
      dispatch({
        type:type+ act,
        payload:addInfo
      });
    }
  }

  return(
    <PageHeaderLayout title={isUpdate ? "修改用户" : "添加用户"} content="">
      <Card bordered={false}>
        <div className={styles.add_div}>
          <AddInput {...param} />
          <div className={styles.submit_div}>
            <Button type="primary" onClick={enterLoading}>
              确定
            </Button>
          </div>
        </div>
      </Card>
    </PageHeaderLayout>
  )
};

export default connect(
  ({user}) => ({user})
)(UserAdd);
